<template>
  <div class="dashboard-container">
    <!-- <div class="app-container">标签管理</div> -->
    <!-- 标签管理 -->
    <!-- version:1.0.0.1 -->
    <!-- 面包屑导航 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><el-link type="primary"><b>首页</b></el-link></el-breadcrumb-item>
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <!-- 面包屑导航 -->
    <!-- 功能按钮组 -->
    <el-card>
      <el-button type="primary" @click="changeTagAddStatus">添加标签</el-button>
      <el-button>返回学科</el-button>
    </el-card>
    <!-- 搜索按钮组 -->
    <el-card>
      <el-form ref="TagFormRef" :model="TagForm" :rules="TagFormchRules" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="标签名称" prop="tagName">
              <el-input v-model="TagForm.tagName"></el-input>
            </el-form-item> 
          </el-col>
          <el-col :span="1">
              <el-button type="primary" icon="el-icon-search" circle @click="FromSearch"></el-button>
          </el-col>
          <el-col :span="1">
              <el-button type="danger" icon="el-icon-close" circle @click="FromSearchClose"></el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 标签table -->
    <el-card>
      <el-table :data="TagFormListData" stripe border style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <!-- 标签名称 -->
        <el-table-column prop="tagName" label="标签名称" ></el-table-column>
        <!--创建者  -->
        <el-table-column prop="username" label="创建者" ></el-table-column>
        <!-- 创建日期 -->
        <el-table-column label="创建日期">
          <template v-slot="scope">
            <div>
              {{scope.row.addDate|parseTimeByString}}
            </div>
          </template>
        </el-table-column>
        <!-- 面试题数量 -->
        <el-table-column prop="totals" label="面试题数量" ></el-table-column>
        <!-- 状态 -->
        <el-table-column label="状态" >
          <template v-slot="scope">
            <div>
              <!-- {{scope.row.state}} -->
              <el-tag type="success" v-if="scope.row.state==1">启用</el-tag>
              <el-tag type="danger" v-else>禁用</el-tag>
            </div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column width="180" label="操作">
          <template v-slot="scope">
            <div>
              <!--  -->
              <el-button type="primary" icon="el-icon-edit" circle :disabled="scope.row.state!==1? false : true" @click="EditTagListData(scope.row)"></el-button>
              <el-button :type="scope.row.state!==1? 'warning':'success'" :icon="scope.row.state!==1? 'el-icon-s-tools':'el-icon-setting'" circle @click="changeTagLsStatus(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle :disabled="scope.row.state!==1? false : true" @click="DeleteTagListData(scope.row.id)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页模块 -->
    <el-card>
      <el-pagination style="text-align:center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="TagForm.page"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="TagForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="TagFromTotal">
      </el-pagination>
    </el-card>
    <!-- 添加标签dislog -->
    <el-dialog title="添加标签" :visible.sync="TagAddVisibleState" width="30%">
      <el-form :model="AddTagFrom" :rules="AddTagFromRules" ref="AddTagFromRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="tagName">
          <el-input v-model="AddTagFrom.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- 确认按钮 -->
        <el-button type="primary" @click="ConfirmAddTagDiaLog" icon="el-icon-check" circle></el-button>
        <!-- 取消按钮 -->
        <el-button type="danger" @click="ResetAddTagDiaLog" icon="el-icon-close" circle></el-button>
      </span>
    </el-dialog>
    <!-- 编辑按钮 -->
    <el-dialog title="添加标签" :visible.sync="EditDataVisibleState" width="30%">
      <el-form :model="EditTagFrom" :rules="EditTagFromRules" ref="EditTagFromRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="tagName">
          <el-input v-model="EditTagFrom.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- 确认按钮 -->
        <el-button type="primary" @click="ConfirmEditTagDiaLog" icon="el-icon-check" circle></el-button>
        <!-- 取消按钮 -->
        <el-button type="danger" @click="ResetEditTagDiaLog" icon="el-icon-close" circle></el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 标签列表数据
import {list as TagList } from '@/api/hmmm/tags.js'
// 引入标签添加
import {add as TagAdd} from '@/api/hmmm/tags.js'
// 引入标签状态
import { removes } from '@/api/hmmm/tags.js'
// 引入删除模块
import { remove } from '@/api/hmmm/tags.js'
// 标签修改模块
import { update } from '@/api/hmmm/tags.js'
// 引入时间格式化工具
import {parseTimeByString} from '@/filters/index.js'
export default {
  name: 'TagsList',
  data() {
    return {
      TagForm:{
        page:1,
        pagesize:5,
        subjectID:null,
        tagName:null,
        state:null,
        id:null,
        state:null
      },
      TagFormListData:[],
      TagFromTotal:null,
      // 搜索框的输入规则
      TagFormchRules:{
        tagName:[
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ]
      },
      // 控制新增标签的显示与隐藏
      TagAddVisibleState:false,
      AddTagFrom:{
        subjectID:1,
        tagName:null
      },
      // 新增标签的输入规则
      AddTagFromRules:{
        tagName:[
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      // TagListStAte 更改列表的状态
      TagListStAte:{
        id:null,
        state:null
      },
      // 编辑标签dialog
      EditDataVisibleState:false,
      EditTagFrom:{
        id:null,
        subjectID:1,
        tagName:null
      },
      // 编辑标签的修改规则
      EditTagFromRules:{
        tagName:[
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created(){
    this.GetTagList()
  },
  methods:{
    // 获取TagList数据
    async GetTagList(){
      const res = await TagList(this.TagForm)
      if(res.status==200){
        this.$message.success('数据获取成功')
        this.TagFormListData=res.data.items
        this.TagFromTotal=res.data.counts
      } 
    },
    // 更改一页显示多少数量
    handleSizeChange(val){
      this.TagForm.pagesize=val
      this.GetTagList()
    },
    // 更改当前页面页面的操作
    handleCurrentChange(val){
      this.TagForm.page=val
      this.GetTagList()
    },
    // 搜索功能
    FromSearch(){
      this.GetTagList()
    },
    // 重置搜索功能
    FromSearchClose(){
      this.$refs.TagFormRef.resetFields()
    },
    // 新增状态的盒子
    changeTagAddStatus(){
      this.TagAddVisibleState=true
    },
    // 重置新增dialog
    ResetAddTagDiaLog(){
      // 对表单数据进行重置
      this.$refs.AddTagFromRef.resetFields()
      this.TagAddVisibleState = false
    },
    // 新增标签的最后一步
    ConfirmAddTagDiaLog(){
      // 对数据进行预校验
      this.$refs.AddTagFromRef.validate(async valid=>{
        console.log(valid)
        if(valid==true){
          const res = await TagAdd(this.AddTagFrom)
          if(res.status==200){
            // 进行页面重载
            this.GetTagList()
            // 对from进行重置
            this.$refs.AddTagFromRef.resetFields()
            // 让输入框进行隐藏
            this.TagAddVisibleState = false
          }
        }else{
          this.$message.error('标签名称不规范，请重新输入')
        }
      }) 
    },
    // 改变Tag的状态
    async changeTagLsStatus(row){
      this.TagListStAte.state=row.state!=1? 1:0
      this.TagListStAte.id=row.id
      const res = await removes(this.TagListStAte)
      this.GetTagList()
    },
    // 删除功能
    // version:1.0.0.1
    // 需要优化
    async DeleteTagListData(id){
      const CodeStatus= await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err)
      // 实现删除操作的请求
      if(CodeStatus!='confirm') return this.$message.info('取消删除操作')
      // 实现删除操作的请求
      const res = await remove({id:id})
      // 判断响应的数据的status是否为200
      if(res.status==200){
        // 如果为200 对页面进行重载
        this.GetTagList()
      }
    },
    // 编辑功能的实现
    // version:1.0.0.1
    EditTagListData(row){
      this.EditDataVisibleState=true
      this.EditTagFrom.id=row.id
    },
    // 关闭按钮的实现
    ResetEditTagDiaLog(){
      this.$refs.EditTagFromRef.resetFields()
      this.EditDataVisibleState=false
    },
    // 修改标签数据
    // version:1.0.0.1
    ConfirmEditTagDiaLog(){
      this.$refs.EditTagFromRef.validate(async valid=>{
        if(valid=='false') return this.$message.info('取消编辑操作')
        const res = await update(this.EditTagFrom)
        if(res.status==200){
          this.$refs.EditTagFromRef.resetFields()
          this.EditDataVisibleState=false
          this.GetTagList()
        }
      })
    }

  }
}
</script>

<style scoped>
.dashboard-container{
  padding: 10px;
}
.el-card{
  width:100%;
  margin-bottom:10px;
}
</style>
